<template>
    <div class="container">
        <div class="box">
            <div class="table-box">
                <h2>
                    用户列表
                </h2>
                <el-table :data="tableData" style="width: 100%" border stripe>
                    <el-table-column prop="id" label="ID" width="100">
                    </el-table-column>
                    <el-table-column prop="username" label="用户名" width="120" />
                    <el-table-column prop="name" label="昵称" width="120" />
                    <el-table-column prop="gender" label="性别" width="120" />
                    <el-table-column prop="age" label="年龄" width="120" />
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="handleDelete(scope.row.id)"
                                style="color: red;">删除</el-button>
                            <el-button type="text" size="small" @click="handleUpdate(scope.row.id)"
                                style="color: #409EFF;">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="user-box">
                <el-form ref="form" :model="userInfo" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="userInfo.username"></el-input>
                    </el-form-item>
                    <el-form-item label="用户昵称">
                        <el-input v-model="userInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="userInfo.gender"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="userInfo.age"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleUpdateUserInfo()">更新</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllUsers, deleteUser } from '../api/user'

export default {
    data() {
        return {
            tableData: [],
            form: {
                id: '',
            },
            userInfo: {
                id: '',
                username: '',
                name: '',
                gender: '',
                age: '',
            },
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        async fetchData() {
            const res = await getAllUsers()
            this.tableData = res.data
        },
        handleDelete(id) {
            deleteUser(id).then(res => {
                console.log(res);
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
                this.fetchData()
            })
        },
        handleUpdate(id) {
            this.userInfo = this.tableData.find(item => item.id === id);
        },
    }
}

</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    padding: 1.5rem;
    width: 80%;
    height: 80%;
    background-color: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 0 30px #0a113612;
    display: flex;
    justify-content: space-around;
}

.table-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-box {
    width: 60%;
    border-left: solid 3px #e6e6e6;
    margin-left: 10px;
}
</style>